﻿@{
    Layout = "~/Views/Shared/_Form.cshtml";
}
<style>
    .flex-container {
        display: flex;
        text-align: center;
    }

    .spantitle {
        font-size: 12px;
        font-weight: bold;
    }

    .spantext { 
        font-size: 16px;
        font-style: italic;
    }
</style>
<link href="/Content/plugin/bootstrap.datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<form id="form" class="form-horizontal m" role="form">
    <fieldset>
        <legend>
            <div class="flex-container">
                <div class="col-sm-4">
                    <span class="spantitle">销售额(RMB)：</span>
                    <br/>
                    <span class="spantext text-red" id="saleRMBAmountAfterTax" col="SaleRMBAmountAfterTax">￥0.00</span>
                </div>
                <div class="col-sm-4">
                    <span class="spantitle">已支付(RMB)：</span>
                    <br />
                    <span class="spantext text-green" id="paidRMBAmountAfterTax" col="PaidRMBAmountAfterTax">￥0.00</span>
                </div>
                <div class="col-sm-4">
                    <span class="spantitle">未支付(RMB)：</span>
                    <br />
                    <span class="spantext text-orange" id="noPayRMBAmountAfterTax" col="NoPayRMBAmountAfterTax">￥0.00</span>
                </div>
            </div>
        </legend>
        <div class="form-group">
            <label class="control-label col-sm-2">付款日期<font class="red">*</font></label>
            <div class="col-xs-12 col-sm-10">
                <div class='input-group date' id="datePayAmountOn">
                    <input type='text' id="payAmountOn" col="PayAmountOn" name="QuotationDate" class="form-control required" placeholder="请选择付款日期" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">付款货币<font class="red">*</font></label>
            <div class="col-xs-12 col-sm-10">
                <select class="form-control required" id="currency" col="Currency" name="Currency">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">付款汇率<font class="red">*</font></label>
            <div class="col-xs-12 col-sm-10">
                <input type="number" id="rate" col="Rate" name="Rate" class="form-control required" min="0.01" placeholder="请输入付款汇率" />
                <span class="help-block m-b-none text-red"><i class="fa fa-info-circle"></i> 对人民币的兑换汇率</span>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">付款金额<font class="red">*</font></label>
            <div class="col-xs-12 col-sm-10">
                <input type="number" id="payAmount" col="PayAmount" name="PayAmount" class="form-control required" min="0" placeholder="请输入付款金额" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">备注说明<font class="red"> &nbsp;</font></label>
            <div class="col-xs-12 col-sm-10">
                <textarea id="remark" name="Remark" col="Remark" class="form-control" rows="5" placeholder="请输入备注说明"></textarea>
            </div>
        </div>
    </fieldset>
</form>
<script src="/Content/plugin/bootstrap.datepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    var projectId = frame.request("projectId");
    $(function () {
        initCurrency('currency', 'SGD', null);
        initDate('datePayAmountOn');
        getForm();
    });

    function getForm() {
        if (!!projectId) {
            frame.ajax({
                url: '@Url.Action("SetReturnPayFormJson", "Project")' + '?projectId=' + projectId,
                type: 'get',
                success: function (obj) {
                    if (obj.success) {
                        obj.data.SaleRMBAmountAfterTax = frame.formatCurrency(obj.data.SaleRMBAmountAfterTax, 'CNY');
                        obj.data.PaidRMBAmountAfterTax = frame.formatCurrency(obj.data.PaidRMBAmountAfterTax, 'CNY');
                        obj.data.NoPayRMBAmountAfterTax = frame.formatCurrency(obj.data.NoPayRMBAmountAfterTax, 'CNY');
                        console.log(obj.data)
                        $('#form').setWebControls(obj.data);
                    }
                    else {
                        frame.msgError(obj.message);
                    }
                }
            });
        }
    }

    function saveForm(index) {
        if ($('#form').validate().form()) {
            var postData = $('#form').getWebControls({ projectId });
            frame.ajax({
                url: '@Url.Action("SaveReturnPayFormJson", "Project")',
                type: 'post',
                data: postData,
                success: function (obj) {
                    if (obj.success) {
                        frame.msgSuccess(obj.message);
                        parent.searchGrid();
                        parent.layer.close(index);
                    }
                    else {
                        frame.msgError(obj.message);
                    }
                }
            });
        }
    }
</script>